<template>
  <div>
    <div class="zoom">
      <div class="spec-preview">
        <img :src="img.imgUrl" />
        <div class="event" @mousemove="move" @mouseout="onMove"></div>
        <div class="big" v-show="isShowBigImg">
          <img
            :src="img.imgUrl"
            :style="{ left: -2 * left + 'px', top: -2 * top + 'px' }"
          />
        </div>
        <div class="mask" :style="{ left: left + 'px', top: top + 'px' }"></div>
      </div>
      <!-- 小图列表 -->
      <Swiper :imgList="imgList" @updateImgIndex="updateImgIndex"></Swiper>
      <div class="code">
        <span class="codeCon">商品编码:AM13220101黑色+闪电+网格</span>
        <span class="codeShouChang"
          ><span class="iconfont icon-shoucang"></span>收藏商品</span
        >
        <div class="codeShare">
          <span class="iconfont icon-fenxiang"></span>分享到:
          <span class="boxArrow"></span>
        </div>
      </div>
    </div>
    <div class="tuiGuang">
      <div><span class="iconfont icon-iconfont5"> </span> 100%正品</div>
      <div><span class="iconfont icon-wodeyouhuiquan"> </span> 天天有神券</div>
    </div>
  </div>
</template>

<script>
import Swiper from "../Swiper";
export default {
  name: "Zoom",
  props: ["goodsInfo"],
  data() {
    return {
      imgIndex:0,
      isShowBigImg: false,
      left: 100,
      top: 100,
    };
  },
  computed: {
    imgList() {
      // 解决家报错
      return this.goodsInfo.skuImageList || [];
    },
    img() {
      // 解决家报错
      return this.imgList[this.imgIndex] || {}
    },
  },
  components: {
    Swiper,
  },
  methods: {
    // 鼠标移入 放大镜效果
    move(e) {
      let x = e.offsetX - 105;
      if (x < 0) x = 0;
      if (x > 200) x = 200;
      let y = e.offsetY - 105;
      if (y < 0) y = 0;
      if (y > 200) y = 200;
      this.left = x;
      this.top = y;
      this.isShowBigImg = true;
    },
    // 鼠标移出
    onMove(){
      this.isShowBigImg = false;
    },
    // 点击小图切换大图
    updateImgIndex(index){
      this.imgIndex = index
    }
  },
};
</script>

<style lang="less" scoped>
.zoom {
  height: 550px;
  border-bottom: 1px dashed #ccc;
  .spec-preview {
    position: relative;
    width: 420px;
    height: 420px;
    // border: 1px solid black;
    img {
      width: 100%;
      height: 100%;
    }
    .event {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
    }
    .mask {
      width: 50%;
      height: 50%;
      // background-color: rgba(229, 255, 0, 0.295);
      position: absolute;
      top: 0;
      left: 0;
      // display: none;
    }
    .big {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #aaa;
      overflow: hidden;
      z-index: 2;
      // display: none;
      background: white;
      img {
        width: 200%;
        max-width: 200%;
        height: 200%;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
  .code {
    margin-top: 10px;
    width: 420px;
    height: 20px;
    // border: 1px solid green;
    display: flex;
    justify-content: space-around;
    .codeCon {
      display: inline-block;
      overflow: hidden;
      width: 200px;
      height: 20px;
      font-size: 12px;
      line-height: 20px;
      color: #666;
      // border: 1px solid red;
    }
    .codeShouChang {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #666;
      .iconfont {
        color: #f32591;
        font-size: 16px;
      }
    }
    .codeShare {
      display: flex;
      box-sizing: border-box;
      padding: 3px;
      align-items: center;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #666;
      border: 1px solid #ccc;
      .boxArrow {
        // display: inline;
        line-height: 0px;
        border: 5px solid #666;
        border-left: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 5px solid transparent;
      }
    }
  }
}
.tuiGuang {
  width: 420px;
  height: 54px;
  margin: 15px 0;
  font-size: 18px;
  // border: 1px solid black;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: #666;
  .iconfont {
    color: #f32591;
  }
}
</style>
